<template>
  <div>
    <div class="wrap">
      <div class="g-wrap">
        <div class="m-proifo">
          <div class="f-pr">
            <img v-lazy="profile.avatarUrl" alt="">
          </div>
          <div class="info">
            <div class="name">
              <div class="name-f1">
                <div class="edit" v-if="profile.artistId">
                  <router-link :to="{name:'Work',params:{id:profile.artistId}}"><i>查看歌手页</i></router-link>
                </div>
                <h2 class="j-name-wrap">
                  <span class="singer">{{ profile.nickname }}</span>
                  <span class="icon-1"></span>
                  <span class="icon-2">{{ level }}
          <i class="lv"></i>
          </span>
                  <i class="man" v-if="profile.gender===1"></i>
                  <i class="women" v-if="profile.gender===2"></i>
                </h2>
                <div class="head-oper">
                  <a href="#" class="head-1"><i class="send">发私信</i></a>
                  <a href="#" class="head-2" style="display: none;"><i class="delfollow">已关注</i></a>
                  <a href="#" class="guanzhu">关注</a>
                </div>
              </div>
              <!--              认证-->
              <p class="name-f2" v-if="identity.length>0">
                <i class="renz"></i>
                <span v-for="(item,index) in identity" :key="index"> {{ item.desc }}&nbsp;</span>

              </p>
              <!--              音乐人-->
              <p class="name-f2" v-if="musician.length>0">
                <i class="yinyueren"></i>
                <span v-for="(item,index) in musician" :key="index"> {{ item.desc }}&nbsp;
                  <span class="yyrtag" v-for="(child,i) in item.tags" :key="i" v-if="item.tags.length>0">
                    {{ child }}
                  </span>
                </span>
              </p>
              <!--              达人-->
              <p class="name-f2" v-if="expert.length>0">
                <i class="daren"></i>
                <span v-for="(item,index) in expert" :key="index"> {{ item.desc }}&nbsp;</span>
              </p>
            </div>
            <ul class="tab-box">
              <li class="frt">
                <router-link :to="{name:'Event',query:{id:$route.params.id}}">
                  <strong>{{ profile.eventCount }}</strong>
                  <span>动态</span>
                </router-link>
              </li>
              <li>
                <router-link :to="{name:'Follows',query:{id:$route.params.id}}">
                  <strong>{{ profile.follows }}</strong>
                  <span>关注</span>
                </router-link>
              </li>
              <li>
                <router-link :to="{name:'Fans',query:{id:$route.params.id}}">
                  <strong>{{ profile.followeds }}</strong>
                  <span>粉丝</span>
                </router-link>
              </li>
            </ul>
            <div class="f-brk" v-if="profile.signature">
              个人介绍：{{ profile.signature }}
            </div>
            <div class="s-fc3">
              <span v-if="city" style="margin-right: 20px">所在地区：{{ city }} </span>
              <span class="sep" v-if="profile.birthday>0">
                 年龄：<span>{{ dateStr }}后</span>
              </span>
            </div>
            <div class="s-fc3" v-if="bindings.length>0">
              <span class="tit" v-if="bindings[0].url">社交网络：</span>
              <ul class="u-logo">
                <li v-for="(u,y) in bindings" :key="y" v-if="u.url">
                  <a :href="u.url" title="新浪微博" class="u-slg-sn u-slg"></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div>

        <!--      电台-->
        <div class="u-title" v-if="djList.length">
          <h3>
          <span class="f-ff2">
            <p>{{ profile.nickname }}</p>
            <p class="fp-13">创建的电台</p>
          </span>
          </h3>
        </div>
        <ul class="m-plylist" v-if="djList.length">
          <li v-for="(li,index) in djList" :key="index" class="itm">
            <router-link :to="{name:'DjRadioDetail',query:{id:li.id}}" class="iuy">
              <img v-lazy="li.intervenePicUrl" alt="">

            </router-link>
            <div class="f-thide">
              <router-link :to="{name:'DjRadioDetail',query:{id:li.id}}" class="s-fc1">{{ li.name }}</router-link>
              <div class="hshow">
                <span></span>
              </div>

            </div>
            <div class="dy">订阅{{ li.subCount }}次</div>
            <div class="num">{{ li.programCount }}期</div>
          </li>
        </ul>
        <!--      听歌排行-->
        <router-view :listenSongs="listenSongs" ></router-view>

        <!--      创建歌单-->
        <div class="u-title" v-if="myself.length">
          <h3>
          <span class="f-ff2">
            <p>{{ profile.nickname }}</p>
            <p class="fp-13">
              <span class="f-pa"></span>
              创建的歌单</p>
            <p class="num">({{ myself.length }})</p>

          </span>
          </h3>
        </div>
        <ul class="cvrlst-ul" v-if="myself.length">
          <li v-for="(li,index) in myself" :key="index">
            <div class="cover">
              <img v-lazy="li.coverImgUrl"
                   alt="">
              <router-link :to="{name:'RecommendDetail',params:{id:li.id}}" class="img-rink"></router-link>
              <div class="bottom">
                <a href="javascript:;" class="bofang" title="播放" @click.prevent="addSong(li.id)"></a>
                <span class="erji"></span>
                <span class="people-num">{{ formatNumber(li.playCount) }}</span>
              </div>
            </div>
            <p class="bottom-text">
              <router-link :to="{name:'RecommendDetail',params:{id:li.id}}" class="text-name">{{ li.name }}</router-link>
            </p>
          </li>
        </ul>
        <!--      收藏歌单-->
        <div class="u-title" v-if="other.length">
          <h3>
          <span class="f-ff2">
            <p>{{ profile.nickname }}</p>
            <p class="fp-13">
              <span class="f-pa"></span>
              收藏的歌单</p>
            <p class="num">({{ other.length }})</p>

          </span>
          </h3>
        </div>
        <ul class="cvrlst-ul" v-if="other.length">
          <li v-for="(li,index) in other" :key="index">
            <div class="cover">
              <img v-lazy="li.coverImgUrl"
                   alt="">
              <router-link :to="{name:'RecommendDetail',params:{id:li.id}}" class="img-rink"></router-link>
              <div class="bottom">
                <a href="javascript:;" class="bofang" title="播放" @click.prevent="addSong(li.id)"></a>
                <span class="erji"></span>
                <span class="people-num">{{ formatNumber(li.playCount) }}</span>
              </div>
            </div>
            <p class="bottom-text">
              <router-link :to="{name:'RecommendDetail',params: {id:li.id}}" class="text-name">{{ li.name }}</router-link>
            </p>
          </li>
        </ul>
      </div>
    </div>

  </div>
</template>

<script>
import {formatDate} from "@/utils/formatDate";
import {formatNumber} from "@/utils/formatNumber";
import {reqSongListDetail} from "@/http/api";
import cities from "@/http/city";
export default {
  name: "index",
  data() {
    return {
      actShow: false,
      identify: {},
      level: '',
      profile: {},
      userPoint: {},
      bindings: [],
      nickname: '',
      city: '',
      formatDate: formatDate,
      date: '',
      djList: [],
      playlist: [],
      formatNumber: formatNumber,
      searchParams: {
        total: '',
        pageSize: 9,
        pageNo: 1,
      },
      myself: [],
      other: [],
      identity: [],
      expert: [],
      musician: [],
      listenSongs:'',
      cities:cities
    }
  },
  computed: {
    dateStr() {
      let num2 = this.date.slice(1, 2)
      let num1 = this.date.slice(0, 1)
      if (num2 >= 5) {
        num2 = 5
      } else {
        num2 = 0
      }
      return (num1 + num2).toString()
    }
  },
  methods: {
    async addSong(id) {
      let result = await reqSongListDetail(id)
      let list = result.data.playlist.tracks
      this.$store.commit('track/addMusic', list)
      this.$store.commit('track/SETMUSIC', list[0])
    },
    async getSingerDetail() {
      let result = await this.$API.reqUserDetail(this.$route.params.id)
      this.identify = result.data.identify
      this.level = result.data.level
      this.profile = result.data.profile
      this.listenSongs =  result.data.listenSongs
      if (result.data.profile.allAuthTypes) {
        let allAuthTypes = result.data.profile.allAuthTypes
        allAuthTypes.forEach(item => {
          if (item.desc.substring(item.desc.length - 2) === '达人') {
            this.expert.push(item)
          } else if (item.desc === '网易音乐人') {
            this.musician.push(item)
          } else if (item.desc) {
            this.identity.push(item)
          }
        })
      }
      this.nickname = result.data.profile.nickname
      this.userPoint = result.data.userPoint
      this.bindings = result.data.bindings.slice(1, 2)

      let date = this.formatDate(result.data.profile.birthday)
      this.date = date.slice(2, 4)
      await this.getCity(result.data.profile.city)
    },

    async getCity(code) {
      let json = this.cities.city
      if (code != 100) {
        if (code.toString().startsWith('810')) {
          let result = this.getArea(json, '810000')
          this.city = result.names.join(' - ')
        } else if (code.toString().startsWith('820')) {
          let result = this.getArea(json, '820000')
          this.city = result.names.join(' - ')
        } else if (code.toString().startsWith('710')) {
          let result = this.getArea(json, '710000')
          this.city = result.names.join(' - ')
        } else {
          let result = this.getArea(json, code.toString())
          this.city = result.names.filter(item=>{
            return item!=='市辖区'
          }).join(' - ')
        }
      }
      return null
    },

    async getUserDj() {
      let result = await this.$API.reqUserDj(this.$route.params.id)
      this.djList = result.data.djRadios
    },

    async getUserSongList() {
      let result = await this.$API.reqUserSongList(this.$route.params.id)
      this.playlist = result.data.playlist
      setTimeout(()=>{
        result.data.playlist.forEach(item => {
          if (item.creator.nickname === this.nickname) {
            this.myself.push(item)
          } else {
            this.other.push(item)
          }
        })
      },20)
    },
    getArea(json, code) {
      let names = [];
      let codes = [];

      function findCity(list, code, father) {
        const index = list.findIndex(ev => {
          return ev.code === code;
        });

        if (index > -1) {
          const child = list[index];
          names.unshift(child.name);
          codes.unshift(child.code);
          father && names.unshift(father.name) && codes.unshift(father.code);
          father && findCity(json || [], father.code);
          return;
        }
        list.map(item => {
          if (item.cities) {
            findCity(item.cities || [], code, item);
          }
        });
      }

      findCity(json, code);
      names = [...new Set(names)];
      codes = [...new Set(codes)];
      return {codes, names};
    }

  },
  mounted() {
    this.getSingerDetail()
    this.getUserDj()
    this.getUserSongList()
  }

}
</script>

<style scoped lang="less">
.wrap {
  width: 980px;
  min-height: 700px;
  margin: 0 auto;
  background-color: #fff;
  padding-bottom: 40px;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;

  .g-wrap {
    padding: 40px;
    height: auto;
    overflow: hidden;

    .m-proifo {
      width: 900px;
      height: 188px;

      .f-pr {
        width: 188px;
        height: 188px;
        float: left;
        margin-right: 40px;

        img {
          width: 188px;
          height: 188px;
          padding: 3px;
          background: #fff;
          border: 1px solid #d5d5d5;
        }
      }

      .info {
        width: 670px;
        float: left;

        .name {
          padding-bottom: 12px;
          margin-bottom: 10px;
          border-bottom: 1px solid #ddd;

          .name-f1 {
            height: auto;
            overflow: hidden;

            .edit {
              float: right;
              margin-top: 2px;

              a {
                color: #333;
                background-position: right -100px;
                padding: 0 5px 0 0;
                white-space: nowrap;
                display: inline-block;
                *display: inline;
                *zoom: 1;
                height: 31px;
                line-height: 31px;
                overflow: hidden;
                *line-height: 32px;
                vertical-align: top;
                text-align: center;
                cursor: pointer;
                background-repeat: no-repeat;
                background-image: url("../../assets/button2.png");

                i {
                  padding: 0 15px 0 20px;
                  pointer-events: none;
                  display: inline-block;
                  color: #333;
                  background-position: 0 -59px;
                  background-image: url("../../assets/button2.png");

                }
              }
            }

            .j-name-wrap {
              .singer {
                max-width: 260px;
                float: left;
                margin-top: 3px;
                font-size: 22px;
                font-weight: normal;
                line-height: 30px;
              }

              .icon-1 {
                float: left;
                width: 57px;
                height: 36px;
                background-size: auto 20px;
                background-repeat: no-repeat;
                background-position: center;
                float: left;
                margin-left: 10px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                background-image: url("../../assets/vip6.png");
              }

              .icon-2 {
                float: left;
                margin: 8px 0 0 10px;
                display: inline-block;
                height: 19px;
                overflow: hidden;
                padding-left: 29px;
                line-height: 21px;
                color: #e03a24;
                font-size: 14px;
                font-weight: bold;
                font-style: italic;
                background-image: url("../../assets/icon2.png");

                background-position: -135px -190px;

                .lv {
                  display: inline-block;
                  overflow: hidden;
                  vertical-align: middle;
                  float: right;
                  width: 9px;
                  height: 19px;
                  background-image: url("../../assets/icon2.png");
                  background-position: -191px -190px;
                }
              }

              .man {
                float: left;
                margin: 9px 0 0 8px;
                width: 20px;
                height: 20px;
                background-position: -41px -57px;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                background-image: url("../../assets/icon.png");
              }

              .women {
                float: left;
                margin: 9px 0 0 8px;
                width: 20px;
                height: 20px;
                background-position: -41px -27px;
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                background-image: url("../../assets/icon.png");
              }
            }

            .head-oper {
              .head-1 {
                float: left;
                margin: 4px 0 0 15px;
                width: 75px;
                height: 31px;
                background-position: 0 -810px;
                display: inline-block;
                background-image: url("../../assets/button.png");

                i {
                  font-style: normal;
                  text-align: left;
                  font-size: inherit;
                  display: inline-block;
                  height: 29px;
                  color: #333;
                  line-height: 29px;
                  padding-left: 30px;
                }
              }

              .head-2 {
                width: 70px;
                height: 31px;
                background-image: url("../../assets/button.png");
                float: left;
                margin: 4px 0 0 15px;
                background-position: 0 -919px;

                i {
                  display: inline-block;
                  height: 30px;
                  line-height: 30px;
                  padding-left: 26px;
                  color: #666;
                }
              }

              .guanzhu {
                float: left;
                margin: 4px 0 0 15px;
                width: 40px;
                height: 31px;
                padding-left: 30px;
                background-position: 0 -720px;
                color: #fff;
                line-height: 30px;
                background-image: url("../../assets/button.png");
                display: inline-block;
              }
            }
          }

          .name-f2 {
            font-size: 14px;
            line-height: 20px;
            color: #666;
            margin-top: 8px;

            .yyrtag {
              display: inline-block;
              height: 16px;
              margin-left: 5px;
              padding: 0 2px;
              vertical-align: middle;
              color: rgba(0, 0, 0, 0.4);
              font-size: 12px;
              line-height: 16px;
              text-align: center;
              border: solid 1px rgba(0, 0, 0, 0.3);
              border-radius: 2px;
            }

            .yinyueren {

              margin-right: 6px;
              float: left;
              background-position: -150px -480px;
              width: 68px;
              height: 20px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../assets/icon2.png");
            }

            .daren {
              margin-right: 6px;
              float: left;
              background-position: -75px -480px;
              width: 68px;
              height: 20px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../assets/icon2.png");
            }

            .renz {
              margin-right: 6px;
              float: left;
              background-position: 0 -480px;
              width: 68px;
              height: 20px;
              display: inline-block;
              overflow: hidden;
              vertical-align: middle;
              background-image: url("../../assets/icon2.png");
            }
          }
        }

        .tab-box {
          height: 41px;
          margin-bottom: 15px;

          li {
            float: left;
            padding: 0 40px 0 20px;
            border-left: 1px solid #ddd;

            a {
              text-decoration: none;

              &:hover {
                color: #0C73C2;
              }
            }

            a {
              display: inline-block;
              *display: inline;
              position: relative;
              zoom: 1;
              color: #666;

              strong {
                display: block;
                margin-top: -4px;
                font-size: 24px;
                font-weight: normal;
                cursor: pointer;
              }

              span {
                display: block;
                text-indent: 2px;
                cursor: pointer;
              }
            }
          }

          .frt {
            padding-left: 0;
            border-left: none;


          }
        }

        .f-brk, .s-fc3 {
          margin-bottom: 5px;
          line-height: 21px;
          color: #666;

          .tit {
            float: left;
          }

          .sep {
            //margin-left: 20px;
          }
        }

        .u-logo {
          margin-left: -8px;
          height: auto;
          overflow: hidden;

          li {
            margin-left: 8px;
            height: 22px;
            float: left;

            .u-slg-sn {
              background-position: 0 0;
            }

            .u-slg {
              width: 20px;
              height: 20px;
              display: inline-block;
              background-image: url("../../assets/logo.png");
            }
          }
        }
      }
    }
  }

  .u-title {
    width: 900px;
    height: 33px;
    margin: 0 auto;
    position: relative;
    border-bottom: 2px solid #c20c0c;

    h3 {
      line-height: 28px;
      float: left;
      font-size: 20px;
      font-weight: normal;

      .f-ff2 {

        display: inline-block;
        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;

        p {
          float: left;
        }

        .fp-13 {
          position: relative;
          margin-right: 10px;

          .f-pa {
            display: inline-block;
            width: 8px;
            height: 8px;
            top: 0px;
            right: -6px;
            position: absolute;
            background-size: cover;
            background-image: url(../../assets/black-r-icon@3x.png);

          }
        }
      }

      .nav {
        position: absolute;
        z-index: 1;
        right: 0;
        bottom: 5px;

        span {
          line-height: 26px;
          color: #666;
          font-size: 12px;
          cursor: pointer;
          float: right;
          margin-left: 8px;
        }

        i {
          width: 1px;
          height: 12px;
          margin-top: 7px;
          background-color: #999;
          float: right;
          margin-left: 8px;
          font-style: normal;
          text-align: left;
          font-size: inherit;
        }

        .z-sel {
          color: #333;
          font-weight: 700;
        }
      }
    }
  }

  .cvrlst-ul {
    margin-top: 20px;
    margin-left: 40px;

    width: 950px;
    height: auto;
    overflow: hidden;
    display: flex;
    //justify-content: space-between;
    flex-wrap: wrap;

    li {
      float: left;
      width: 140px;
      height: 204px;
      //padding: 0 0 30px 50px;
      margin-right: 50px;

      .cover {
        position: relative;

        img {
          width: 140px;
          height: 140px;
        }

        .img-rink {
          width: 140px;
          height: 140px;
          display: inline-block;
          position: absolute;
          top: 0;
          left: 0;
        }

        .bottom {
          width: 140px;
          height: 27px;
          position: absolute;
          bottom: 0;
          left: 0;
          color: #ccc;
          background: url("../../assets/coverall.png") no-repeat 0 -540px;

          .bofang {
            display: inline-block;
            width: 16px;
            height: 17px;
            background: url("../../assets/iconall.png") 0 0;
            position: absolute;
            right: 10px;
            bottom: 6px;
            &:hover {
              background-position: 0 -60px;
            }
          }

          .erji {
            width: 14px;
            height: 11px;
            display: inline-block;
            position: absolute;
            bottom: 9px;
            left: 10px;
            background: url("../../assets/iconall.png") no-repeat 0 -24px;
          }

          .people-num {
            position: absolute;
            bottom: 7px;
            left: 30px;
          }
        }
      }

      .bottom-text {
        margin: 8px 0 3px;
        font-size: 14px;
        width: 100%;

        a {
          display: inline-block;
          max-width: 100%;
          color: #000;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          vertical-align: middle;
        }
      }
    }
  }

  .m-plylist {
    height: auto;
    overflow: hidden;
    width: 900px;
    margin: 0 auto 24px auto;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-top: none;

    .itm {
      display: flex;
      align-items: center;
      height: 70px;
      line-height: 50px;
      float: left;
      width: 100%;
      background: #fff;
      &:hover .f-thide .hshow{
        display: block;
      }
      &:hover {
        background-color: #EEEEEE;
      }

&:nth-child(even){
  background-color: #F7F7F7;
}
      .iuy {
        margin-left: 20px;
        float: left;
        width: 50px;
        height: 50px;

        img {
          width: 50px;
          height: 50px;
        }

      }

      .f-thide {
        width: 500px;
        padding-right: 38px;
        float: left;
        margin-left: 10px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        word-wrap: normal;
        position: relative;
        zoom: 1;

        .s-fc1 {
          color: #333;
        }

        .hshow {
          position: absolute;
          top: 50%;
          right: 0;
          display: none;
          margin-top: -6px;

          span {
            float: right;
            margin-right: 10px;
            text-indent: -9999px;
            cursor: pointer;
            width: 16px;
            height: 14px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-position: -90px 0;
            background-image: url("../../assets/icon2.png");
          }
        }

      }

      .dy {
        width: 216px;
        float: left;
        margin-left: 10px;
      }

      .num {
        width: 44px;
        float: left;
        text-align: center;
        //margin-left: 10px;
      }
    }
  }

  .m-record {
    padding-bottom: 60px;
  }
}
</style>